<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合作伙伴LOGO旋转展示</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
    <style>
        .logo {
            width: 300px;
            height: 300px;
            background: skyblue;
            border-radius: 30px;
        }
    </style>
</head>

<body>
    <div style="height: 1000px;"></div>
    <div class="logo" id="logo">
    </div>
    <div class="logo" id="logo">
    </div>
    <div class="logo" id="logo">
    </div>
    <div class="logo" id="logo">
    </div>
    <div class="logo" id="logo">
    </div>
    <div class="logo" id="logo">
    </div>
    <script>
        const logo = document.querySelectorAll('#logo');
        gsap.registerPlugin(ScrollTrigger)//作为一个插件使用必须要先引入
        const boxes = gsap.utils.toArray(logo);
        boxes.forEach(box => {
            gsap.to(box, {
                scrollTrigger: {
                    trigger: box,
                    start: "bottom bottom",
                    end: "top 20%",
                    scrub:true,
                   
                },
                x: 400,
                borderRadius: "100%",
                scale: 1.5,
                ease: 'power1.inOut',
            })
        })
        //gsap.to  从当前状态到动画状态
        // gsap.to(logo, {
        //     y: 250,
        //     repeat: -1,
        //     yoyo: true,
        //     rotation: 360,
        //     borderRadius: "100%",
        //     ease: 'power1.inOut',
        //     stagger: {
        //         amount: 5,
        //         from: "center",
        //         ease: "power1.inOut",
        //         grid: [2, 1],
        //         axis: 'y',

        //     },
        // })




    </script>
</body>

</html>